<template>
	<view class="padb30">
		<cu-custom bgColor="bg-gradual-orange">
			<block slot="content">流程管理系统</block>
		</cu-custom>
		<scroll-view scroll-x class="nav text-center bg-gradual-orange" scroll-with-animation :scroll-left="scrollLeft">
			<view class="scrollX-Item pad5" :class="index==curTitle?'':''" v-for="(item,index) in titles" :key="index" @click="tabSelect"
			 :data-id="index">
				<view class="lh1 pos-r ripple padt2 fs18">
					<text class="fa fa-truck" :class="curTitle==0?'':'op6'" v-if="index==0"></text>
					<text class="fa fa-exchange " :class="curTitle==1?'':'op6'" v-if="index==1"></text>
					<text class="fa fa-cubes" :class="curTitle==2?'':'op6'" v-if="index==2"></text>
					<text class="fa fa-retweet" :class="curTitle==3?'':'op6'" v-if="index==3"></text>
					<view class="mart3 fs10" :class="index==curTitle?'':''">{{item}}</view>
					<view class="tac pos-a l0 r0 b-9 fs18">
						<view><text class="fa fa-caret-up" v-if="index==curTitle"></text></view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="bg-white" v-if="$com.isTrue(cars) && curTitle == 0">
			<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="carScrollLeft">
				<view class="scrollX-Item wh20 ripple" :class="index==curCar?'text-red':''" v-for="(item,index) in cars" :key="index"
				 @tap="carTabSelect" :data-id="index">
					<view class="pad5">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="pad3 bg-orange light bdbso bdtso" v-if="$com.isTrue(cars) && curTitle == 0">
			<view class="text-s">{{cars[curCar].intro}}</view>
		</view>


		<view class="bg-white" v-if="$com.isTrue(carType) && curTitle == 1">
			<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="carTypeScrollLeft">
				<view class="scrollX-Item wh20 ripple" :class="index==curCarType?'text-red':''" v-for="(item,index) in carType" :key="index"
				 @tap="carTypeTabSelect" :data-id="index">
					<view class="pad5">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="pad3 bg-orange light bdbso bdtso" v-if="$com.isTrue(goods) && curTitle == 1">
			<view class="text-s">{{goods[curGoods].intro}}</view>
		</view>


		<view class="bg-white" v-if="$com.isTrue(goods) && curTitle == 2">
			<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="goodsScrollLeft">
				<view class="scrollX-Item wh20 ripple" :class="index==curGoods?'text-red':''" v-for="(item,index) in goods" :key="index"
				 @tap="goodsTabSelect" :data-id="index">
					<view class="pad5">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="pad3 bg-orange light bdbso bdtso" v-if="$com.isTrue(goods) && curTitle == 2">
			<view class="text-s">{{goods[curGoods].intro}}</view>
		</view>

		<view class="bg-white" v-if="$com.isTrue(load) && curTitle == 3">
			<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="loadScrollLeft">
				<view class="scrollX-Item wh20 ripple" :class="index==curLoad?'text-red':''" v-for="(item,index) in load" :key="index"
				 @tap="loadTabSelect" :data-id="index">
					<view class="pad5">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="pad3 bg-orange light bdbso bdtso" v-if="$com.isTrue(load) && curTitle == 3">
			<view class="text-s">{{load[curLoad].intro}}</view>
		</view>

		<view class="pad2">
			<view class="bg-white round2 shadow-blur lh2 bdbda">
				<view class="flrc padtb3 padlr5">
					<view class="padr5">货物名称:</view>
					<view class="flex1">
						<input type="text" v-model="title" placeholder="货物名称/运输内容描述">
					</view>
				</view>
			</view>
			<view class="bg-white round2 shadow-blur lh2 bdbda">
				<view class="flrc padtb3 padlr5 ripple" @click="getStart">
					<view class="padr5">发货地点:</view>
					<view class="flex1">{{!$com.isTrue(startName)?'请选择':startName}}</view>
					<view class="fa fa-angle-right"></view>
				</view>
				<view class="flrc padtb3 padlr5">
					<view class="padr5">发货地址:</view>
					<view class="flex1">
						<input type="text" v-model="startAddress" placeholder="输入详细的发货地址">
					</view>
				</view>
			</view>
			<view class="bg-white round2 shadow-blur lh2 bdbda">
				<view class="flrc padtb3 padlr5 ripple" @click="getEnd">
					<view class="padr5">收货地点:</view>
					<view class="flex1">{{!$com.isTrue(endName)?'请选择':endName}}</view>
					<view class="fa fa-angle-right"></view>
				</view>
				<view class="flrc padtb3 padlr5">
					<view class="padr5">收货地址:</view>
					<view class="flex1">
						<input type="text" v-model="endAddress" placeholder="输入详细的收货地址">
					</view>
				</view>
			</view>
		<!-- 	<view class="bg-white round2 shadow-blur lh2 bdbda">
				<view class="flrc padtb3 padlr5">
					<view class="padr5">联系人:</view>
					<view class="flex1">
						<input type="text" v-model="contact" placeholder="请输入联系人">
					</view>
				</view>
			</view> -->
			<view class="bg-white round2 shadow-blur lh2 bdbda">
				<view class="flrc padtb3 padlr5">
					<view class="padr5">联系电话:</view>
					<view class="flex1">
						<input type="digit" v-model="phone" placeholder="请输入联系电话">
					</view>
				</view>
			</view>
			<view class="bg-white round2 shadow-blur lh2 bdbda">
				<view class="flrc padtb3 padlr5">
					<view class="padr5">意向价格:</view>
					<view class="flex1">
						<input type="text" v-model="price" placeholder="[可选]请输入意向价格">
					</view>
				</view>
			</view>
			<view class="bg-white round2 shadow-blur lh2 padb3">
				<view class="flex-c padtb3 padlr5 bdbda">
					<view class="padr5">附加信息:</view>
					<view class="flex1 padb10">
						<input type="text" v-model="tips" placeholder="[可选]还有什么要嘱咐的吗">
						<!-- <textarea v-model="tips" class=" w100" auto-height placeholder="[可选]还有什么要嘱咐的吗？" /> -->
					</view>
				</view>
			</view>
		</view>
		<view class="pos-f b0 l0 r0 bg-gradual-red shadow-blur" v-if="login">
			<view class="bg-white tac padb2 ripple" @tap="$win.goto('/pages/wuliu/charge/charge')" v-if="!$com.isbool(vip)">
				<view class="text-xxl text-red pad2">升级会员，每单返运费50元</view>
				<view class="text-sm">升级会员后方可下单，成交后更有返运费福利</view>
			</view>
			<view class="flrc tac text-white text-lg">
				<view class="pad5 flex4 bg-orange ripple" @tap="$win.goto('/pages/wuliu/charge/charge')" v-if="!$com.isbool(vip)">发起订单</view>
				<view class="pad5 flex4 bg-orange ripple" @tap="createOrder" v-if="$com.isbool(vip)">发起订单</view>
				<view class="pad5 flex2 bg-yellow ripple text-white" @tap="$win.goto('/pages/wuliu/charge/charge')" v-if="!$com.isbool(vip)">升级会员</view>
			</view>
		</view>
		<view class="pos-f b0 l0 r0 bg-gradual-red shadow-blur" @click="$win.goto('/pages/wuliu/login/login')" v-if="!login">
			<view class="bg-white tac padb2 ripple">
				<view class="text-xxl text-red pad2">升级会员，每单返运费50元</view>
				<view class="text-sm">升级会员后方可下单，成交后更有返运费福利</view>
			</view>
			<view class="flrc tac text-white text-lg">
				<view class="pad5 flex4 bg-orange ripple">
					发起订单
				</view>
				<view class="pad5 flex2 bg-yellow ripple text-white">升级会员</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../static/js/api.js'
	import com from '../../../static/js/com.js'
	import win from '../../../static/js/win.js'
	export default {

		data() {
			return {
				coverShow: true,
				scrollLeft: 0,
				curTitle: 0,
				titles: ['车辆类型', '选择车长', '货物类型', '几装几卸'],

				carScrollLeft: 0,
				curCar: 0,
				cars: [],

				curGoods: 0,
				goodsScrollLeft: 0,
				goods: [],

				curLoad: 0,
				loadScrollLeft: 0,
				load: [],

				curCarType: 0,
				carTypeScrollLeft: 0,
				carType: [],


				// 订单数据
				title: '',

				startLat: '',
				startLon: '',
				startAddress: '',
				startName: '',

				endLat: '',
				endLon: '',
				endAddress: '',
				endName: '',

				price: '',
				contact: '未录入',
				phone: '',
				tips: '',

				login: false,
				vip: false,
				user: null,
				wuser: null,

			}
		},
		methods: {
			tabSelect(e) {
				this.curTitle = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			carTabSelect(e) {
				this.curCar = e.currentTarget.dataset.id;
				this.carScrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			carTypeTabSelect(e) {
				this.curCarType = e.currentTarget.dataset.id;
				this.carTypeScrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			goodsTabSelect(e) {
				this.curGoods = e.currentTarget.dataset.id;
				this.goodsScrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			loadTabSelect(e) {
				this.curLoad = e.currentTarget.dataset.id;
				this.loadScrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			getConfig() {
				let _this = this
				api.get('/api/get_user_info', {}, function(res) {
					console.log(res)
					_this.login = res.d.login
					_this.user = res.d.user
					_this.wuser = res.d.wuser
					_this.vip = res.d.vip
				})
			},
			getStart() {
				let _this = this
				uni.chooseLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_this.startLat = res.latitude
						_this.startLon = res.longitude
						_this.startAddress = res.address + res.name
						_this.startName = res.address
						
						
					},
					complete: function(res) {
						console.log(res)
					}
				});
			},
			getEnd() {
				let _this = this
				uni.chooseLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_this.endLat = res.latitude
						_this.endLon = res.longitude
						_this.endAddress = res.address + res.name
						_this.endName = res.address
					
					},
					complete: function(res) {
						console.log(res)
					}
				});
			},
			createOrder() {
				console.log('create order')
				let data = {
					title: this.title,

					car: this.cars[this.curCar].id,
					goods: this.goods[this.curGoods].id,
					load: this.load[this.curLoad].id,
					carType: this.carType[this.curCarType].id,

					startLat: this.startLat,
					startLon: this.startLon,
					startAddress: this.startAddress,

					endLat: this.endLat,
					endLon: this.endLon,
					endAddress: this.endAddress,

					phone: this.phone,
					contact: this.contact,
					price: this.price,
					tips: this.tips,

				}
				//设置缓存数据
				com.setLocData('phone',this.phone)
				com.setLocData('contact',this.contact)
				
				com.setLocData('startLat',_this.startLat)
				com.setLocData('startLon',_this.startLon)
				com.setLocData('startAddress',_this.startAddress)
				com.setLocData('startName',_this.startName)
				
				com.setLocData('endLat',_this.endLat)
				com.setLocData('endLon',_this.endLon)
				com.setLocData('endAddress',_this.endAddress)
				com.setLocData('endName',_this.endName)
				
				api.post("/api/create_order", data, function(res) {
					console.log(res)
					com.showToast(res.i)
					win.goto('/pages/wuliu/orders/orders')
				})
			}
		},
		created() {
			// this.login = com.isLogin()
			// this.getConfig()
			let _this = this
			api.get('/api/wuliuCarss', {
				_order: {
					sort: 'ASC'
				}
			}, function(res) {
				console.log(res)
				_this.cars = res.d
			})
			api.get('/api/wuliuGoodsTypes', {
				_order: {
					sort: 'ASC'
				}
			}, function(res) {
				console.log(res)
				_this.goods = res.d
			})
			api.get('/api/wuliuLoadTypes', {
				_order: {
					sort: 'ASC'
				}
			}, function(res) {
				console.log(res)
				_this.load = res.d
			})
			api.get('/api/wuliuCarTypes', {
				_order: {
					sort: 'ASC'
				}
			}, function(res) {
				console.log(res)
				_this.carType = res.d
			})
			//缓存数据
			let phone = com.getLocData('phone')
			if(com.isTrue(phone)){
				_this.phone = phone
			}
			let contact = com.getLocData('contact')
			if(com.isTrue(contact)){
				_this.contact = contact
			}
			if(com.isTrue(com.getLocData('startLat'))){
				_this.startLat = com.getLocData('startLat') 
				_this.startLon = com.getLocData('startLat') 
				_this.startAddress = com.getLocData('startAddress') 
				_this.startName = com.getLocData('startName') 
			}
			if(com.isTrue(com.getLocData('endLat'))){
				_this.endLat = com.getLocData('endLat') 
				_this.endLon = com.getLocData('endLon') 
				_this.endAddress = com.getLocData('endAddress') 
				_this.endName = com.getLocData('endName')
			}
		},
		onShow() {
			console.log('index on show')
			this.login = com.isLogin()
			this.getConfig()
		}
	}
</script>

<style>

</style>
